<template>
  <div id="centerBottom">
    <div class="table_header">
      <div class="title f1">
        序号
      </div>
      <div class="title f2">
        战区名称
      </div>
      <div class="title f2">
        警情总量
      </div>
      <div class="title f2">
        同期量
      </div>
      <div class="title f2">
        同比变化
      </div>
    </div>
    <div class="carousel-container" ref="carouselContainer" @mouseenter="stopScroll" @mouseleave="startScroll">
      <template>
        <div class="row" v-for="(item,index) in  apiData" :key="index">
          <img class="row_bg" @dragstart.prevent  :style="{opacity:index % 2 === 0 ? 0.3 : 1}" src="@/assets/img/c_b_box_bg.png"
               alt="">
          <div class="value f1">
            {{ index + 1 }}
          </div>
          <div class="value f2">
            {{ item.areaName }}
          </div>
          <div class="value f2">
            {{ item.curNum }}
          </div>
          <div class="value f2">
            {{ item.tongQiNum }}
          </div>
          <div class="value f2 ">
            <comparison :first="item.curNum" :second="item.tongQiNum"
                        :third="item.tongBiBianHuaLiang "></comparison>
          </div>
        </div>
      </template>
      <template v-if="isScroll">
        <div class="row" v-for="(item,index) in  apiData" :key="index + '2'">
          <img class="row_bg" :style="{opacity:index % 2 === 0 ? 0.3 : 1}" src="@/assets/img/c_b_box_bg.png" alt="">
          <div class="value f1">
            {{ index + 1 }}
          </div>
          <div class="value f2">
            {{ item.areaName }}
          </div>
          <div class="value f2">
            {{ item.curNum }}
          </div>
          <div class="value f2">
            {{ item.tongQiNum }}
          </div>
          <div class="value f2 ">
            <comparison :first="item.curNum" :second="item.tongQiNum"
                        :third="item.tongBiBianHuaLiang "></comparison>
          </div>
        </div>
      </template>
    </div>

  </div>
</template>

<script>
import comparison from '_c/comparison.vue'

export default {
  name: '',
  props: {
    apiData: {},
    isScroll: {
      default: false
    },
    // 每次滚动的间隔时间（毫秒）
    scrollSpeed: {
      type: Number,
      default: 100
    },
    // 每次滚动的步长（像素）
    scrollStep: {
      type: Number,
      default: 1
    }
  },
  components: {
    comparison,
  },
  created() {
  },
  mounted() {
    // 启动无限滚动
    if (this.isScroll) {
      this.startScroll()
    }
  },
  beforeDestroy() {
    if (this.isScroll) {
      // 组件销毁前清除定时器
      this.stopScroll()
    }
  },
  data() {
    return {
      scrollInterval: null

    }
  },
  methods: {
    // 启动滚动逻辑
    startScroll() {
      const container = this.$refs.carouselContainer
      this.scrollInterval = setInterval(() => {
        // 当滚动高度超过内容高度的一半时，重置滚动位置，实现无限滚动
        if (container.scrollTop >= container.scrollHeight / 2) {
          container.scrollTop = 0
        } else {
          container.scrollTop += this.scrollStep
        }
      }, this.scrollSpeed)
    },
    // 停止滚动定时器
    stopScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval)
        this.scrollInterval = null
      }
    }
  }
}
</script>
<style scoped lang="scss">
$center-box-width: 672px;
$item-box-height: 40px;
#centerBottom {
  width: $center-box-width;
  font-family: PingFang SC, PingFang SC sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #BDCEE2;
  line-height: 14px;
  text-align: center;

  .carousel-container {
    height: 192px;
    overflow: hidden;
    position: relative;

  }

  .f1 {
    flex: 1;
  }

  .f2 {
    flex: 2;
  }

  .table_header {
    width: $center-box-width;
    background-image: url("@/assets/img/c_b_box_bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    padding: 13px 30px;
    justify-content: space-between;
    text-align: center;

  }

  .row {
    position: relative;
    height: $item-box-height;
    padding: 13px 30px;
    justify-content: space-between;
    text-align: center;
    margin-top: 8px;
    display: flex;
    align-items: center;

    .row_bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: $center-box-width;
      z-index: 0;
      user-select: none;
    }
    .value {
      z-index: 1;
    }
  }
}

</style>
